<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Blog后台管理</title>
    <!--    <link rel="stylesheet" href="css/semantic.min.css">-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css"
          th:href="@{/lib/editormd/css/editormd.min.css}">
    <link rel="stylesheet" href="../../static/css/typo.css" th:href="@{/css/typo.css}">
</head>
<body>
<!--导航-->
<nav class="ui inverted attached segment m-padded-tb-mini m-shadown-small" th:replace="admin/_fragments :: menu(1)">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui header teal item">后台管理</h2>
            <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i>博客</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
            <div class="right m-item m-mobile-hide menu">
                <div class="ui dropdown item">
                    <div class="text">
                        <img src="../../static/images/touxiang.jpg" th:src="@{/images/touxiang.jpg}" alt=""
                             class="ui avatar image">
                        周纯彬
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show ">
        <i class="sidebar icon"></i>
    </a>
</nav>
<!--二级导航-->
<div class="ui attached pointing menu">
    <div class="ui container">
        <div class="right menu">
            <a href="#" th:href="@{/admin/release}" class="teal active item">发布</a>
            <a href="#" th:href="@{/admin/blogs}" class="item">列表</a>
        </div>
    </div>
</div>
<!--=========================中间内容==============================-->

<div class="m-padded-tb-larges m-container-small">
    <div class="ui container">
        <form name="blogform" id="blog-form" th:object="${blog}" action="#" th:action="@{/admin/blogs}" method="post" enctype="multipart/form-data" class="ui form">
            <input type="hidden" name="published">
            <input type="hidden" name="id" th:value="*{id}">
            <div class="required field">
                <div class="ui left labeled input">
                    <div class="ui selection compact orange basic dropdown label">
                        <input type="hidden" value="原创" name="flag" th:value="*{flag}">
                        <i class="dropdown icon"></i>
                        <div class="text" >原创</div>
                        <div class="menu">
                            <div class="item" data-value="原创">原创</div>
                            <div class="item" data-value="转载">转载</div>
                            <div class="item" data-value="翻译">翻译</div>
                        </div>
                    </div>
                    <input type="text" name="title" placeholder="标题" th:value="*{title}">
                </div>
            </div>
            <!--=========编辑器========-->
            <div class="required field">
                <div id="md-content" style="z-index: 1 !important;">
                    <textarea name="content" placeholder="博客内容" th:text="*{content}" style="display: none">
                        [TOC]

#### Disabled options

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;
                    </textarea>
                </div>
            </div>
            <div class="two fields">
                <div class="required field">
                    <div class="ui left labeled action input">
                        <label class="ui compact teal basic label">分类</label>
                        <div class="ui fluid selection dropdown">
                            <input type="hidden" name="type.id" th:value="*{type}!=null ? *{type.id}">  <!--封装到blog中的type里-->
                            <i class="dropdown icon"></i>
                            <div class="default text">分类</div>
                            <div class="menu">
                                <div th:each="type : ${types}" class="item" th:data-value="${type.id}" data-value="1"
                                     th:text="${type.name}">错误日志
                                </div>
                                <!--  <div class="item" data-value="2">开发者手册</div>-->
                            </div>
                        </div>
                    </div>
                </div>
<!--标签-->
                <div class=" field">
                    <div class="ui left labeled action input">
                        <label class="ui compact teal basic label">标签</label>
                        <div class="ui fluid multiple search selection dropdown">
                            <input type="hidden" name="tagIds"  th:value="*{tagIds}"><!--标签-->
                            <i class="dropdown icon"></i>
                            <div class="default text">标签</div>
                            <div class="menu">
                                <div th:each="tag : ${tags}" class="item" th:data-value="${tag.id}" data-value="1"
                                     th:text="${tag.name}">java
                                </div>
                                <!--  <div class="item" data-value="2">sql</div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--选首图-->
            <div class="required field">
                <div class="ui left labeled input">
                    <label for="testFileInput" class="ui teal basic label">点我上传首图</label>
                    <input type="text" name="firstPicture"  placeholder="首图本地地址" th:value="*{firstPicture}"><!--readonly-->
                </div>
            </div>
            <!--上传首图-->
            <div class="ui two fields  m-padded-tb-bottom-small">
                <div class="divider field"
                     style="border:1px solid #ccc;width:255px;height:160px;text-indent:0;text-align: center;">
                    <img src="" alt="" srcset="" id="new_img"
                         style="width:auto;height:auto;max-width: 100%;max-height: 100%;" th:src="@{*{firstPicture}}">
                </div>
                <input id="testFileInput" type="file" multiple="false" name="firstImg" style="display: none" onchange="document.blogform.firstPicture.value=this.value" />
<!--简介-->
                <div class="required field">
                    <textarea name="description" th:text="*{description}" id="" placeholder="博客简介" style="width: 585px;height: 160px!important;"></textarea>
                </div>
            </div>
            <!--上传首图底部-->

            <div class="inline fields ">
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="recommend" name="recommend"  class="hidden" th:checked="*{recommend}">
                        <label for="recommend">推荐</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="shareStatement" name="shareStatement" class="hidden" th:checked="*{shareStatement}">
                        <label for="shareStatement">转载声明</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="appreciation" name="appreciation" class="hidden" th:checked="*{appreciation}">
                        <label for="appreciation">赞赏</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="commentabled" name="commentabled" class="hidden" th:checked="*{commentabled}">
                        <label for="commentabled">评论</label>
                    </div>
                </div>
            </div>
            <div class="ui error message"></div>
            <!--按钮-->
            <div class="ui right aligned container">
                <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
                <button type="button" id="save-btn" class="ui secondary button">保存</button>
                <button type="button" id="publish-btn" class="ui teal button">发布</button>
            </div>

        </form>
    </div>
</div>
<br>
<!--========================底部footer===============================-->
<!---->
<footer class="ui inverted vertical segment m-padded-tb-big" th:replace="admin/_fragments :: footer">
    <div class="ui center aligned container">
        <div class="ui stackable inverted divided grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../../static/images/meWechat.jpg" class="ui rounded image" alt=""
                             style="width: 110px">
                    </div>
                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header  m-font-spaced" style="font-weight: normal">最新博客</h4>
                <div class="ui inverted link list m-font-thin">
                    <a href="#" class="item">笔记01</a>
                    <a href="#" class="item">笔记01</a>
                    <a href="#" class="item">笔记01</a>
                </div>
            </div>

            <div class="five wide column">
                <h4 class="ui inverted header" style="font-weight: normal">Blog介绍</h4>
                <p class="m-font-thin m-font-spaced m-opacity-mini ">修炼一途，乃窃阴阳，夺造化，转涅槃，握生死，掌轮回。 武之极，破苍穹，动乾坤！</p>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header  m-font-spaced" style="font-weight: normal">联系我</h4>
                <div class="ui inverted  list" style="text-align: left;margin-left: 30px">
                    <div class="item">
                        <img src="../../static/images/qq.png" style="width: 20px">
                        <span class="m-font-thin m-opacity-mini"
                              style="font-size: 14px">&nbsp;&nbsp;QQ：2251073096</span>
                    </div>
                    <div class="item">
                        <img src="../../static/images/email.png" style="width: 18px">
                        <span class="m-opacity-mini" style="font-size: 14px">&nbsp;&nbsp;Eamil：2251073096@qq.com</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="ui inverted section divider"></div>
        <p class="m-font-thin m-font-spaced m-opacity-tiny" style="font-size: 13px">Copyright © 2021 - 2022 ZhouChB All
            Rights Reserved V.1.0</p>
    </div>
</footer>
<!--<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"/>-->
<script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../../static/js/semantic.min.js" th:src="@{/js/semantic.min.js}"></script>
<script src="../../static/js/my.js" th:src="@{/js/my.js}"></script>
<script src="../../static/lib/editormd/editormd.min.js" th:src="@{/lib/editormd/editormd.min.js}"></script>
<script>
    $("#save-btn").click(function () {
        $("[name='published']").val("false");
        $("#blog-form").submit();
    });
    $("#publish-btn").click(function () {
        $("[name='published']").val("true");
        $("#blog-form").submit();
    });

    /*后台管理表单*/
    $('.ui.form').form({
        fields: {
            content: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入博客内容'
                }]
            },
            typeId: {
                identifier: 'typeId',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请选择博客分类'
                }]
            },
            firstPicture: {
                identifier: 'firstPicture',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入博客首图'
                }]
            },
            description: {
                identifier: 'description',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入博客简介'
                }]
            },
        }
    })

    /*页眉三杠*/
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    })
</script>
<!--<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>-->

</body>
</html>